<script setup>
import { ref,onMounted} from 'vue';
// import { useRoute } from 'vue-router';
import * as admin from '@/api/indexdata.js'
import * as admin2 from '@/api/admin.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import useUserInfoStore from '@/stores/userInfo.js'
import {useTokenStore} from '@/stores/token.js'
const tokenStore = useTokenStore();
const userInfoStore = useUserInfoStore();
const router = useRouter();
const profile = ref({});

const user_data = ref({})

const getUserdata = async ()=>{
    const res = await admin.userDataService();
    if (res.code == 0){
      user_data.value = res.data
      console.log(user_data.value)
    }
}

// 上传头像前检查文件类型
const beforeAvatarUpload = (file) => {
  const isImage = file.type.startsWith('image/');
  if (!isImage) {
    this.$message.error('只能上传图片!');
  }
  return isImage;
};

// 头像上传处理
const handleAvatarChange = (file) => {
  const reader = new FileReader();
  reader.onload = (e) => {
    profile.value.avatar = e.target.result; // 更新头像
  };
  reader.readAsDataURL(file.raw);
};

// 保存个人信息
const saveProfile = async () => {
  // 可以在此处添加 API 请求来保存修改后的个人信息
  const res = await admin2.articleUserupdateService(user_data.value)
  ElMessage.success(res.msg ? res.msg : '修改成功')
};

const loginout = async()=>{
  tokenStore.removeToken()
  userInfoStore.removeInfo()

  //2.跳转到登录页面
  router.push('/login')
  ElMessage({
      type: 'success',
      message: '退出登录成功',
  })
}

const uploadSuccess = (result)=>{
    console.log(result)
    user_data.value.img = result.data;
    console.log(result.data);
}
onMounted(() => {
  getUserdata();
});

</script>


<template>
  <el-card class="profile-card">
    <h2 class="profile-title">个人信息</h2>
    <el-divider></el-divider>
    <!-- 个人信息表单 -->
    <el-form :model="profile" ref="profileForm" label-width="100px" class="profile-form">
      <!-- 头像上传 -->
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/upload/image"
          :show-file-list="false"
          :on-success="uploadSuccess"
        >
          <!-- 如果有头像，显示头像图片，否则显示上传按钮 -->
          <img v-if="user_data.img" :src="user_data.img" class="avatar" />
          <el-button v-else>上传头像</el-button>
        </el-upload>
      </el-form-item>

      <!-- 用户名 -->
      <el-form-item label="用户名">
        <el-input v-model="user_data.userName" disabled class="input-field"></el-input>
      </el-form-item>

      <!-- 昵称 -->
      <el-form-item label="昵称">
        <el-input v-model="user_data.nickName" class="input-field"></el-input>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱">
        <el-input v-model="user_data.email" class="input-field"></el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item label="密码">
        <el-input v-model="profile.password" type="password" class="input-field"></el-input>
      </el-form-item>

      <!-- 保存按钮 -->
      <el-form-item>
        <el-button type="primary" class="save-button" @click="saveProfile">保存</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" class="save-button" @click="loginout">退出登录</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>



<style scoped>
.profile-card {
  background-color: #ffffff;
  padding: 24px; /* 增大内边距 */
  border-radius: 12px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.profile-card:hover {
  box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.2);
}

.profile-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-top: -20px; /* 增加标题下边距 */
  margin-bottom: 20px; /* 增加标题下边距 */
  /* text-align: center; */
}

.profile-form {
  width: 100%;
}

.avatar-uploader {
  display: inline-block;
  margin-bottom: 20px; /* 增加上传按钮下边距 */
}

.avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
  border: 2px solid #ddd;
}

.el-form-item {
  margin-bottom: 20px; /* 增加表单项底部间距 */
}

.el-input {
  border-radius: 8px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.05);
}

.el-button {
  width: 100%;
  border-radius: 8px;
  padding: 12px 0; /* 增加按钮内边距 */
  font-size: 16px;
}

.save-button {
  background-color: #3498db;
  border-color: #3498db;
}

.save-button:hover {
  background-color: #2980b9;
  border-color: #2980b9;
}

.save-button:focus {
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
}

.el-button {
  transition: background-color 0.3s ease, transform 0.3s ease;
}
</style>
